<template>
  <el-card>
    <template #header>
      <div class="sear-search-title">
        <span>线上热门搜索</span>
        <i class="el-icon-more" />
      </div>
    </template>

    <el-row :gutter="30">
      <el-col :lg="12" :md="24">
        <div class="sear-search-name">
          <span>搜索用户数</span>
          <svg
            t="1630717979821"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3776"
            width="22"
            height="22"
          >
            <path
              d="M512 179.2a332.8 332.8 0 1 1 0 665.6 332.8 332.8 0 0 1 0-665.6z m0 51.2a281.6 281.6 0 1 0 0 563.2 281.6 281.6 0 0 0 0-563.2z"
              p-id="3777"
              fill="#bfbfbf"
            />
            <path
              d="M512.768 339.968a38.7072 38.7072 0 1 1 0 77.3632 38.7072 38.7072 0 0 1 0-77.3632zM546.4576 678.6048h-27.2384c-14.2848 0-29.0304-12.3904-29.0304-23.7056V498.0224h-9.728a25.8048 25.8048 0 1 1 0-51.6096s31.488-0.1024 32.3072 0c13.1072 0.9728 22.5792 6.656 22.5792 17.3568v163.2768h11.1104a25.8048 25.8048 0 1 1 0 51.5584z"
              p-id="3778"
              fill="#bfbfbf"
            />
          </svg>
        </div>

        <div>
          <span class="sear-search-number">12321</span>
          <span class="sear-search-percent">17.1</span>
          <svg
            t="1630719348891"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4736"
            width="16"
            height="16"
          >
            <path
              d="M855.16288 682.99776 171.14112 682.99776l342.016-341.99552L855.16288 682.99776z"
              p-id="4737"
              fill="#d81e06"
            />
          </svg>
        </div>

        <LineChart
          :data="[22, 12, 33, 15, 28, 44, 11, 23, 37]"
          color="#5b8ff9"
        />
      </el-col>

      <el-col :lg="12" :md="24">
        <div class="sear-search-name">
          <span>搜索用户数</span>
          <svg
            t="1630717979821"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3776"
            width="22"
            height="22"
          >
            <path
              d="M512 179.2a332.8 332.8 0 1 1 0 665.6 332.8 332.8 0 0 1 0-665.6z m0 51.2a281.6 281.6 0 1 0 0 563.2 281.6 281.6 0 0 0 0-563.2z"
              p-id="3777"
              fill="#bfbfbf"
            />
            <path
              d="M512.768 339.968a38.7072 38.7072 0 1 1 0 77.3632 38.7072 38.7072 0 0 1 0-77.3632zM546.4576 678.6048h-27.2384c-14.2848 0-29.0304-12.3904-29.0304-23.7056V498.0224h-9.728a25.8048 25.8048 0 1 1 0-51.6096s31.488-0.1024 32.3072 0c13.1072 0.9728 22.5792 6.656 22.5792 17.3568v163.2768h11.1104a25.8048 25.8048 0 1 1 0 51.5584z"
              p-id="3778"
              fill="#bfbfbf"
            />
          </svg>
        </div>

        <div>
          <span class="sear-search-number">12321</span>
          <span class="sear-search-percent">17.1</span>
          <svg
            t="1630719348891"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4736"
            width="16"
            height="16"
          >
            <path
              d="M855.16288 682.99776 171.14112 682.99776l342.016-341.99552L855.16288 682.99776z"
              p-id="4737"
              fill="#d81e06"
            />
          </svg>
        </div>

        <LineChart
          :data="[22, 12, 33, 15, 28, 44, 11, 23, 37]"
          color="#5b8ff9"
        />
      </el-col>
    </el-row>

    <el-table :data="data" border class="sear-seatch-table">
      <el-table-column label="排名" type="index" />
      <el-table-column prop="name" label="搜索关键字" />
      <el-table-column prop="address" label="用户数" sortable />
      <el-table-column prop="count" label="周涨幅" sortable />
    </el-table>

    <div class="block">
      <span class="demonstration" />
      <el-pagination layout="prev, pager, next" :total="50" />
    </div>
  </el-card>
</template>

<script>
// import { mapState } from 'vuex'
import LineChart from './LineChart.vue'

export default {
  name: 'HotSearch',
  components: {
    LineChart
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      data: [
        {
          date: '1',
          name: '北京',
          address: '1626',
          count: '3440'
        },
        {
          date: '2',
          name: '上海',
          address: '66660',
          count: '8180'
        },
        {
          date: '3',
          name: '广州',
          address: '2196',
          count: '7814'
        },
        {
          date: '4',
          name: '深圳',
          address: '7120',
          count: '8888'
        },
        {
          date: '5',
          name: '南京',
          address: '7120',
          count: '6204'
        }
      ]
    }
  },
  methods: {
    // handleCurrentChange(currentPage) {
    //   this.currentPage = currentPage
    // }
  }
}
</script>

<style lang="scss" scoped>
.sear-search-title {
  display: flex;
  justify-content: space-between;
}
.sear-search-name {
  display: flex;
  align-items: center;
  color: gray;
  font-size: 16px;
  margin-bottom: 10px;
  span {
    margin-right: 10px;
  }
}
.sear-search-number {
  font-size: 25px;
  margin-right: 30px;
}
.sear-search-percent {
  color: gray;
  margin-right: 5px;
}
.sear-seatch-table {
  margin: 20px 0 10px;
}
.sear-search-pagination {
  float: right;
  margin-bottom: 10px;
}
.block{
  float: right;
  margin-bottom: 10px;
}
</style>
